<template>
  <div class="mobile-container">
    <!-- 轮播图 -->
    <!-- <el-carousel :interval="3000" height="180px">
      <el-carousel-item v-for="i in 5" :key="i">
        <img 
          :src="`https://picsum.photos/300/200?random=${i}`"
          class="carousel-img"
        />
      </el-carousel-item>
    </el-carousel> -->

    <!-- 使用router-link的导航 -->
    <!-- 路由是动态导入的，使用.push()跳过去需要刷新 -->
    <div class="nav-scroll-wrapper">
      <el-scrollbar>
        <div class="nav-grid">
          <router-link 
            v-for="nav in navigations"
            :key="nav.name"
            :to="{ name: nav.routeName }"
            class="nav-item"
            custom
            v-slot="{ navigate }"
          >
            <div 
              class="nav-content"
              @click="navigate"
              @keypress.enter="navigate"
              role="link"
            >
              <div class="icon-placeholder">
                <el-icon :size="28"><component :is="nav.icon" /></el-icon>
              </div>
              <div class="nav-text">{{ nav.name }}</div>
            </div>
          </router-link>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getInfo } from '@/api/Login'
import { 
  House,
  Menu,
  User,
  Files,
  SetUp,
  CollectionTag
} from '@element-plus/icons-vue'

// 内容加载与导航配置
const navigations = ref([
  { name: '仓库', routeName: 'Warehouse', icon: House },
  { name: '卡片', routeName: 'Card', icon: Menu },
  { name: '管理', routeName: 'Admin', icon: SetUp },
  { name: '卡组', routeName: 'Cardmate', icon: CollectionTag },
  
])

const route = useRoute()
const hasLogin = computed(() => route.meta.requiresAuth)
const checkPermission = () => {
  getInfo().then(res => {
    if(res.data.code === 200){
      console.log("权限检查结果：", res.data.data.permission)
      if(res.data.data.permission>1){
        navigations.value.push( { name: '用户', routeName: 'Users', icon: User });
        navigations.value.push( { name: '日志', routeName: 'Log', icon: Files });
      }
    }
  })
}
watch(hasLogin, checkPermission, { immediate: true })



</script>

<style scoped>
/* 新增样式调整 */
.nav-item {
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  width: 80px;
}

.nav-content {
  cursor: pointer;
  transition: all 0.2s;
  &:active {
    transform: scale(0.95);
  }
}


.mobile-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px;
  
}

.carousel-img {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  object-fit: cover;
}

.nav-scroll-wrapper {
  margin-top: 20px;
}

.nav-grid {
  display: flex;
  gap: 15px;
  padding: 8px 0;
  text-align:center
}

.icon-placeholder {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--el-color-primary-light-9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-color-primary);
}

.nav-text {
  margin-top: 6px;
  font-size: 12px;
  color: var(--el-text-color-regular);
}

:deep(.el-scrollbar__bar.is-horizontal) {
  height: 3px;
}
</style>